<template>
    <div>
        <el-dialog v-model="showTaskExport" :title="`${modelData.id ? '编辑' : '新增'}任务`" width="500px" :before-close="cancel">
            <el-form ref="ruleFormRef" :model="ruleForm.formData" :rules="rules" label-width="120px" class="demo-ruleForm">
                <el-form-item label="任务名称" prop="taskName">
                    <el-input v-model="ruleForm.formData.taskName" />
                </el-form-item>
                <el-form-item label="任务类型" prop="taskCategory">
                    <el-radio-group v-model="ruleForm.formData.taskCategory">
                        <!-- <el-radio :label="1">打卡任务</el-radio> -->
                        <el-radio :label="2">企微任务</el-radio>
                        <el-radio :label="3">业绩任务</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="任务编码" prop="taskCode">
                    <el-input v-model="ruleForm.formData.taskCode" />
                </el-form-item>
                <el-form-item label="任务图片" required>
                   <Upload
                        v-model="ruleForm.formData.taskImg"
                        :limit="1"
                        :show-file-list="false"
                        @success="success"
                    >
                        <template #default>
                        <img v-if="ruleForm.formData.taskImg" :src="ruleForm.formData.taskImg" class="avatar" />
                        <div class="upload-box"><el-icon v-if="!ruleForm.formData.taskImg" class="avatar-uploader-icon"><Plus /></el-icon></div>
                        <span v-if="ruleForm.formData.taskImg" class="el-upload-list__item-actions"  @click.stop="" >
                            <span
                                class="el-upload-list__item-delete"
                                @click.stop="handleRemove()"
                            >
                                <el-icon><Delete /></el-icon>
                            </span>
                        </span>
                        </template>
                    </Upload>
                </el-form-item>
                <el-form-item label="跳转链接">
                    <el-input v-model="ruleForm.formData.taskUrl" />
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-switch v-model="ruleForm.formData.status" :active-value="1" :inactive-value="0"/>
                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import integralApi from "@/api/integralApi.js";
import Upload from "@/components/upload.vue";
import type { FormInstance, FormRules } from 'element-plus'
const props = defineProps({
    showTaskExport: Boolean,
    modelData: {
        type: Object,
        default: {},
    },
});
const {showTaskExport, modelData} = toRefs(props)
const loading = ref(false)
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    formData: {
        taskName: '',
        taskCategory: 2,
        taskCode: '',
        taskUrl: '',
        status: 0,
        taskImg: '',
    },
})
const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入任务名称', trigger: 'blur' },
    ],
    taskCode: [
        { required: true, message: '请输入任务编码', trigger: 'blur' },
    ],
    taskImg: [
        { required: true, message: '请添加任务图片', trigger: 'blur' },
    ],
    taskCategory: [
        { required: true, message: '请选择任务类型', trigger: 'blur' },
    ],
   
})
watch(
  () => showTaskExport.value,
  (showOrderExport) => {
    if(showOrderExport) {
       ruleForm.formData = {
            taskName: modelData.value.taskName,
            taskCategory: modelData.value.category,
            taskCode: modelData.value.taskCode,
            taskUrl: modelData.value.taskUrl,
            status: modelData.value.status,
            taskImg: modelData.value.taskImg,
        }
    }else {
        ruleForm.formData = {
            taskName: '',
            taskCategory: 1,
            taskCode: '',
            taskUrl: '',
            status: 0,
            taskImg: '',
        }
    }
  }
)

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if(!ruleForm.formData.taskImg) {
                ElMessage({
                    message: '请添加任务图片',
                    type: 'warning',
                })
                return
            }
            addTask()
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 新增任务
const addTask = async()=>{
  loading.value = true
  let params = ruleForm.formData
  if(modelData.value.id) {
    params = {...params, ...{id:modelData.value.id}}
  }
  let rs = await integralApi.addTask(params)
  if(rs.code === 200) {
    ElMessage({
    message: `${modelData.value.id ? '编辑' : '新增'}任务成功`,
    type: 'success',
    })
    confirm()
  }
  loading.value = false
    
}
const handleRemove = ()=>{
    ruleForm.formData.taskImg = ''
}
const success = (val:any)=> {
    console.log('val',val);
    ruleForm.formData.taskImg = val.url
}
const confirm = () => {
    emit("confirm");
    cancel()
};

const cancel = () => {
    emit("cancel");
}
const emit = defineEmits(["confirm", "cancel"]);
</script>

<style lang="scss" scoped>
:deep(.avatar) {
  width: 100px;
  height: 100px;
  display: block;
}
 :deep(.el-upload) {
    width: 100px;
  height: 100px;
//   border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

 
 :deep(.el-upload:hover){
//   border-color: var(--el-color-primary);
}
.upload-box {
    width: 98px;
    height: 98px;
    line-height: 98px;
    text-align: center;
    display: block;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.upload-box:hover {
    border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
.el-upload-list__item-actions {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba($color: #000000, $alpha: .6);
    position: absolute;
    text-align: center;
    line-height: 100px;
    .el-upload-list__item-delete{
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
    }
}

.el-upload:hover .el-upload-list__item-actions,.el-upload-list__item-delete {
    display: block;
    
}
</style>